<template>
  <div class="right-menu-container">
    <!-- 第一模块 -->
    <NuxtLayout name="shadow">
      <template #header-left>
        <h1 class="shadow-title">加入云帆美研</h1>
        <span class="shadow-update-time">
          <span class="shadow-subtitle"
            >努力学习的第
            <span class="num-days">{{ studyDays }}</span>
            天</span
          >
        </span>
      </template>
      <!-- 仪表盘 -->
      <div class="stats-container">
        <!-- 模考最高分 -->
        <div class="rightPannel-chat">
          <div>
            <div class="stat-item">
              <div class="stat-label">模考最高分</div>
              <div class="stat-detail">
                <span class="fix">CR</span><span>占比份额最大</span>
                <div class="percentage">45%</div>
              </div>
            </div>

            <!-- 考试倒计时 -->
            <div class="stat-item">
              <div class="stat-label">考试倒计时</div>
              <div class="stat-detail">
                <span class="fix">CR</span><span>占比份额最大</span>
                <div class="percentage">45%</div>
              </div>
            </div>
          </div>

          <!-- 题量分布信息 -->
          <div class="chart-container">
            <ClientOnly fallback-tag="div" fallback="加载数据中...">
              <EachartsBox :chartOptions="chartOptions"></EachartsBox>
            </ClientOnly>
          </div>
        </div>

        <div class="action-button">
          <a href="#" class="view-details">查看做题详情</a>
        </div>
      </div>
    </NuxtLayout>
    <!-- 第二模块 -->
    <NuxtLayout name="shadow">
      <template #header-left>
        <h1 class="shadow-title">分数计算器</h1>
        <!-- <h1 class="shadow-title">GMAT Focus Score & Percentile Calculator</h1> -->
      </template>
      <div class="score-sections">
        <!-- Quant Section -->
        <div class="score-section" :class="subject == 3 ? 'column a-l_c' : ''">
          <div class="section-header">
            <span class="section-title">Quantitative Reasoning</span>
            <span class="percentile-label" v-if="verbalPercentile !== '——'"
              >Percentile</span
            >
          </div>
          <div class="slider-container">
            <el-slider
              :show-tooltip="false"
              v-model="quantScore"
              :min="subject == 1 ? 60 : subject == 2 ? 130 : 0"
              :max="subject == 1 ? 90 : subject == 2 ? 170 : 20"
              :format-tooltip="formatTooltip"
              @input="calculateTotal"
            />
            <div class="score-display">{{ quantScore }}</div>
            <div class="percentile-display" v-if="verbalPercentile !== '——'">
              {{ quantPercentile }}
            </div>
          </div>
          <div class="mean-text" v-if="subject == 1">Mean Score 78</div>
        </div>
        <!-- Verbal Section -->
        <div class="score-section" :class="subject == 3 ? 'column a-l_c' : ''">
          <div class="section-header">
            <span class="section-title">Verbal Reasoning</span>
            <span class="percentile-label" v-if="verbalPercentile !== '——'"
              >Percentile</span
            >
          </div>
          <div class="slider-container">
            <el-slider
              :show-tooltip="false"
              v-model="verbalScore"
              :min="subject == 1 ? 60 : subject == 2 ? 130 : 0"
              :max="subject == 1 ? 90 : subject == 2 ? 170 : 20"
              :format-tooltip="formatTooltip"
              @input="calculateTotal"
            />
            <div class="score-display">{{ verbalScore }}</div>
            <div class="percentile-display" v-if="verbalPercentile !== '——'">
              {{ verbalPercentile }}
            </div>
          </div>
          <div class="mean-text" v-if="subject == 1">Mean Score 79</div>
        </div>

        <!-- Data Insights Section -->
        <div class="score-section" :class="subject == 3 ? 'column a-l_c' : ''">
          <div class="section-header">
            <span class="section-title">{{
              subject == 1
                ? "Data Insights"
                : subject == 2
                ? "Analytical Writing"
                : "Integrated Reasoning"
            }}</span>
            <span class="percentile-label" v-if="verbalPercentile !== '——'"
              >Percentile</span
            >
          </div>
          <div class="slider-container">
            <el-slider
              :show-tooltip="false"
              v-model="dataScore"
              :min="subject == 1 ? 60 : subject == 2 ? 0 : 0"
              :max="subject == 1 ? 90 : subject == 2 ? 6 : 20"
              :step="subject == 2 ? 0.5 : 1"
              :format-tooltip="formatTooltip"
              @input="calculateTotal"
            />
            <div class="score-display">{{ dataScore }}</div>
            <div class="percentile-display" v-if="verbalPercentile !== '——'">
              {{ dataPercentile }}
            </div>
          </div>
          <div class="mean-text" v-if="subject == 1">Mean Score 75</div>
        </div>

        <!-- footer -->
        <div class="total-score">
          <div class="score-box">
            <div class="box-label">Total Score</div>
            <div class="box-value">{{ totalScore }}</div>
          </div>
          <el-divider
            v-if="totalPercentile != '-'"
            direction="vertical"
            style="height: auto"
          />

          <div class="score-box" v-if="totalPercentile != '-'">
            <div class="box-label">Percentile Ranking</div>
            <div class="box-value">{{ totalPercentile }}</div>
          </div>
          <el-divider v-if="examScore != '-'" direction="vertical" style="height: auto" />

          <div class="score-box" v-if="examScore != '-'">
            <div class="box-label">
              {{ subject == 1 ? "Exam(10th Edition)" : "Mean Score" }}
            </div>
            <div class="box-value">{{ examScore }}</div>
          </div>
        </div>
      </div>
    </NuxtLayout>

    <!-- 1.2.3名排序 -->
    <!-- <NuxtLayout name="shadow" class="ranking-container">
      <template #header-left>
        <div class="paihangbang-header">
          <div class="header-title">排行榜</div>

          <div class="ranking-tabs">
            <div
              v-for="tab in tabs"
              :key="tab.key"
              :class="['tab-item', { active: currentTab === tab.key }]"
              @click="currentTab = tab.key"
            >
              {{ tab.label }}
            </div>
          </div>
        </div>
      </template>
      <template #header-right>
        <div class="header-more">
          更多
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </template>

      <div class="ranking-list">
        <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
          <div class="rank-index">
            <template v-if="index + 1 <= 3">
              <img
                :src="getRankIcon(index + 1)"
                class="rank-icon"
                :alt="`第${index + 1}名`"
              />
            </template>
            <template v-else>
              {{ index + 1 }}
            </template>
          </div>
          <div class="user-avatar">
            <img src="~@/static/Ellipse12.png" alt="avatar" />
          </div>
          <div class="user-name">{{ item.name }}</div>
          <div class="user-score">{{ item.score }}时</div>
        </div>
      </div>
    </NuxtLayout> -->

    <!-- 最新资讯 -->
    <NuxtLayout name="shadow">
      <template #header-left>
        <div class="header-title column a-l_c" @click="goToConsultList">最新资讯</div>
      </template>
      <template #header-right>
        <div class="header-more" @click="goToConsultList">
          更多
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </template>

      <LoadingNodata class="record-loading" :loading="newsLoading" :data="newsItems">
        <div class="news-content">
          <div
            v-for="(item, index) in newsItems"
            :key="index"
            class="news-item"
            @click="goNewsDetail(item.id)"
          >
            <p class="news-text" v-html="item.title"></p>
          </div>
        </div>
      </LoadingNodata>
    </NuxtLayout>

    <!-- 题库更新部分 -->
    <NuxtLayout name="shadow">
      <template #header-left>
        <div class="header-title column a-l_c">题库更新</div>
        <span class="question-count">已收录{{ totalQuestions }}道题目</span>
      </template>
      <template #header-right>
        <div class="header-more" @click="goToQuestionList">
          更多
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </template>
      <LoadingNodata
        class="record-loading"
        :loading="questionLoading"
        :data="questionItems"
      >
        <div class="question-list">
          <div v-for="(item, index) in questionItems" :key="index">
            <div class="question-item">
              <div
                class="question-text"
                v-html="mathHTMLToShow(replaceQuestionTitle(item.title))"
              ></div>
              <div class="question-tags">
                <!-- <span class="tag">{{ item.typename }}</span> -->
                <span class="tag">{{ item.type2name }}</span>
              </div>
            </div>
            <el-divider style="margin: 8px 0px" />
          </div>
        </div>
      </LoadingNodata>
    </NuxtLayout>
  </div>
</template>

<script setup>
import Grade from "@/utils/grade.json";
import { getQuestionList } from "@/service/exam.js";
import { handlePath } from "@/utils/index.js";
import { ref, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { getAricleDataListHot } from "~/service/banner";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/User";
const userStore = useUserStore();
const subject = computed(() => handlePath(route.name));
const router = useRouter();
const route = useRoute();
const studyDays = ref(988);
const quantScore = ref(subject.value == 1 ? 79 : subject.value == 2 ? 145 : 10);
const verbalScore = ref(subject.value == 1 ? 79 : subject.value == 2 ? 145 : 10);
const dataScore = ref(subject.value == 1 ? 79 : subject.value == 2 ? 3 : 10);
const rankIcon1 = new URL("../static/rank1.png", import.meta.url).href;
const rankIcon2 = new URL("../static/rank2.png", import.meta.url).href;
const rankIcon3 = new URL("../static/rank3.png", import.meta.url).href;
const currentTab = ref("studyTime");

// GMAT总分计算 - 向下取整（留5）
function handelNum(num) {
  if (num.toFixed(0) % 10 == 6) {
    return num.toFixed(0) - 1;
  } else if (num.toFixed(0) % 10 == 7) {
    return num.toFixed(0) - 2;
  } else if (num.toFixed(0) % 10 == 8) {
    return num.toFixed(0) - 3;
  } else if (num.toFixed(0) % 10 == 9) {
    return num.toFixed(0) - 4;
  } else if (num.toFixed(0) % 10 == 0) {
    return num.toFixed(0) - 5;
  } else if (num.toFixed(0) % 10 == 1) {
    return num.toFixed(0) - 6;
  } else if (num.toFixed(0) % 10 == 2) {
    return num.toFixed(0) - 7;
  } else if (num.toFixed(0) % 10 == 3) {
    return num.toFixed(0) - 8;
  } else if (num.toFixed(0) % 10 == 4) {
    return num.toFixed(0) - 9;
  } else if (num.toFixed(0) % 10 == 5) {
    return num.toFixed(0);
  }
}

const quantPercentile = computed(() => {
  if (subject.value == 1) {
    return Grade.GMAT.Q.find((i) => i.Score == quantScore.value)?.Percentile;
  } else if (subject.value == 2) {
    return Grade.GRE.Q.find((i) => i.Score == quantScore.value)?.Percentile;
  } else if (subject.value == 3) {
    return Grade.EA.Q.find((i) => i.Score == quantScore.value)?.Percentile;
  }
});
const verbalPercentile = computed(() => {
  if (subject.value == 1) {
    return Grade.GMAT.V.find((i) => i.Score == verbalScore.value)?.Percentile;
  } else if (subject.value == 2) {
    return Grade.GRE.V.find((i) => i.Score == verbalScore.value)?.Percentile;
  } else if (subject.value == 3) {
    return Grade.EA.V.find((i) => i.Score == verbalScore.value)?.Percentile;
  }
});
const dataPercentile = computed(() => {
  if (subject.value == 1) {
    return Grade.GMAT.D.find((i) => i.Score == dataScore.value)?.Percentile;
  } else if (subject.value == 2) {
    return Grade.GRE.D.find((i) => i.Score == dataScore.value)?.Percentile;
  } else if (subject.value == 3) {
    return Grade.EA.D.find((i) => i.Score == dataScore.value)?.Percentile;
  }
});

const totalScore = computed(() => {
  // GMAT
  if (subject.value == 1) {
    return handelNum(
      ((verbalScore.value + quantScore.value + dataScore.value) / 3 - 60) * 20 + 205
    );
  } else if (subject.value == 2) {
    return verbalScore.value + quantScore.value;
  } else if (subject.value == 3) {
    return (
      ((verbalScore.value + quantScore.value + dataScore.value) * 5) / 3 +
      100
    ).toFixed(0);
  }
});

const totalPercentile = computed(() => {
  if (subject.value == 1) {
    return Grade.GMAT.Total.find((i) => i.Score == totalScore.value)?.Percentile;
  } else {
    return "-";
  }
});
const examScore = computed(() => {
  if (subject.value == 1) {
    return Grade.GMAT.Total.find((i) => i.Score == totalScore.value)?.Exam;
  } else {
    return "-";
  }
});

const tabs = [
  { key: "studyTime", label: "学习时长" },
  { key: "questionCount", label: "刷题量" },
  { key: "examScore", label: "模考成绩" },
];

const rankingData = ref([
  {
    name: "名称名称名称...",
    score: "200.34",
  },
  {
    name: "名称名称名称...",
    score: "200.34",
  },
  {
    name: "名称名称名称...",
    score: "200.34",
  },
  {
    name: "名称名称名称...",
    score: "200.34",
  },
  // 添加更多数据...
]);
const newsLoading = ref(false);
const newsItems = ref([]);
const formatTooltip = (val) => {
  return val;
};

const goNewsDetail = (id) => {
  router.push(`/consultDetail/${id}`);
};

// 题目列表
const questionLoading = ref(false);
const questionItems = ref([]);
const totalQuestions = ref(0);
const getQuestionListFn = async () => {
  const data = {
    page: 1,
    rows: 5,
    subject: subject.value,
  };
  questionLoading.value = true;
  const res = await getQuestionList(data);
  questionLoading.value = false;
  if (res.code == "000000") {
    questionItems.value = res.data.result;
    totalQuestions.value = res.data.totalCount;
  }
};
const goToQuestionList = () => {
  router.push(`/questionList`);
};

onMounted(() => {
  initAricleList();
  getQuestionListFn();
});
const initAricleList = async () => {
  try {
    newsLoading.value = true;

    let response = await getAricleDataListHot({
      page: 1,
      rows: 5,
      typeid: subject.value == 1 ? 441 : subject.value == 2 ? 446 : 451,
    });
    newsLoading.value = false;
    newsItems.value = response.data.result;
    // console.log()
  } catch (e) {
    //TODO handle the exception
  }
};

// const fetchRankingData = async (type) => {
//   try {
//     // 这里替换为实际的 API 调用
//     const response = await fetch(`/api/ranking/${type}`)
//     const data = await response.json()
//     rankingData.value = data
//   } catch (error) {
//     console.error('Failed to fetch ranking data:', error)
//   }
// }

// // 监听 tab 变化
// watch(currentTab, (newTab) => {
//   fetchRankingData(newTab)
// })

// // 初始加载
// onMounted(() => {
//   fetchRankingData(currentTab.value)
// })
const getRankIcon = (rank) => {
  switch (rank) {
    case 1:
      return rankIcon1;
    case 2:
      return rankIcon2;
    case 3:
      return rankIcon3;
    default:
      return "";
  }
};

// const totalQuestions = ref(232434);
// const questionItems = ref([
//   {
//     title: "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
//     type: "DR",
//     category: "考点",
//     difficulty: "单选题",
//   },
//   {
//     title: "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
//     type: "DR",
//     category: "考点",
//     difficulty: "单选题",
//   },
//   {
//     title: "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
//     type: "DR",
//     category: "考点",
//     difficulty: "单选题",
//   },
//   {
//     title: "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
//     type: "DR",
//     category: "考点",
//     difficulty: "单选题",
//   },
//   {
//     title: "题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
//     type: "DR",
//     category: "考点",
//     difficulty: "单选题",
//   },
//   // 重复相同结构的数据 4 次以创建 5 个题目
// ]);
const calculateTotal = () => {
  // 计算逻辑
  totalScore.value = Math.round(
    (quantScore.value + verbalScore.value + dataScore.value) * 2.3
  );
  examScore.value = totalScore.value;
};

const goToConsultList = () => {
  if (subject.value == 1) router.push("/consultList?typeid=441");
  if (subject.value == 2) router.push("/consultList?typeid=446");
  if (subject.value == 3) router.push("/consultList?typeid=451");
};
const chartOptions = {
  legend: {
    orient: "horizontal",
    bottom: 15,
    left: "center",
  },
  title: {
    text: "题量分布信息",
    left: "center",
  },
  grid: {
    top: "2%",
    show: false,
  },
  series: [
    {
      type: "pie",

      label: {
        show: false,
      },
      roseType: "radius",
      radius: [5, 60],
      center: ["50%", "40%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 2,
      },
      data: [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
        { value: 28, name: "rose 5" },
      ],
    },
  ],
};
// 组件逻辑
</script>

<style scoped lang="scss">
.two-headers {
  .one {
    color: #333333;
    font-size: 12px;
    font-weight: 600;
  }

  .two {
    color: #333333;
    font-size: 12px;
    font-weight: 400;
  }
}

:deep(.shadow-container) {
  margin-top: 0 !important;
}

.stats-container {
  .stat-item {
    margin-bottom: 19px;

    .stat-label {
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      margin-bottom: 5px;
    }

    .stat-detail {
      .fix {
        font-size: 12px;
        color: #333333;
        font-weight: 600;
        margin-right: 10px;
      }

      span {
        color: #666;
        font-size: 14px;
      }

      .percentage {
        font-size: 32px;
        color: #126983;
        font-weight: bold;
        margin-top: 8px;
      }
    }
  }
}

.num-days {
  color: #126983;
  font-size: 24px;
  font-weight: 600;
}

.shadow-title {
  font-size: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.shadow-subtitle {
  font-size: 14px;
  color: #666666;
  display: flex;
  align-items: center;

  span {
    color: #126983;
    margin: 0 4px;
  }
}

.action-button {
  text-align: center;
  height: 42px;
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;

  &::before {
    content: "";
    width: 379px;
    display: inline-block;
    height: 1px;
    background-color: #eeeeee;
    position: absolute;
    top: 0px;
    left: -15px;
    right: 0px;
  }

  .view-details {
    color: #126983;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

// 第二部分的组件
.calculator-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.shadow-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.score-sections {
  .score-section {
    background-color: #f0fafc;
    padding: 15px 15px 15px 20px;
    border-radius: 8px;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 15px;

  .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .percentile-label {
    color: #666;
    font-size: 14px;
  }
}

.slider-container {
  position: relative;
  // padding: 0 20px;
  width: 240px;
  margin: 20px 0 10px 0;

  .score-display {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #126983;
    font-weight: 500;
  }

  .percentile-display {
    position: absolute;
    right: -64px;
    top: 0;
    color: #126983;
    font-size: 18px;
    font-weight: 500;
  }
}

.mean-text {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-right: 57px;
  margin-top: -10px;
}

.total-score {
  display: flex;
  justify-content: space-between;
  // gap: 20px;
  height: 66px;

  .score-box {
    flex: 1;
    text-align: center;

    .box-label {
      color: #999999;
      font-size: 12px;
      margin-bottom: 8px;
      white-space: nowrap;
    }

    .box-value {
      font-size: 32px;
      font-weight: bold;
      color: #333;
    }
  }
}

:deep(.el-slider__runway) {
  background-color: #e9ecef;
}

:deep(.el-slider__bar) {
  background-color: #126983;
}

:deep(.el-slider__button) {
  border-color: #126983;
}

:deep(.shadow-header) {
  margin-bottom: 13px !important;
}

//咨询页面
.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin-right: 10px;
}

.header-more {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 14px;
  cursor: pointer;

  .el-icon {
    margin-left: 4px;
  }

  &:hover {
    color: #126983;
  }
}

.news-content {
  // padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .news-item {
    // padding: 8px 0;

    .news-text {
      margin: 0;
      font-size: 14px;
      color: #333333;
      // line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      cursor: pointer;

      &:hover {
        color: #126983;
      }
    }
  }
}

// 题库更新

.question-count {
  margin-left: 8px;
  font-size: 14px;
  color: #999999;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .question-item {
    cursor: pointer;

    .question-text {
      font-size: 14px;
      color: #333333;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      transition: all 0.3s ease;

      &:hover {
        color: #126983;
        text-decoration: underline;
      }
    }

    .question-tags {
      display: flex;
      gap: 16px;

      .tag {
        color: #999999;
        font-size: 14px;
      }
    }

    // ... existing styles ...
  }
}

// 1.2.3名排序

.ranking-container {
  height: 300px;
  display: flex;
  flex-direction: column;
}

.ranking-tabs {
  display: flex;
  gap: 24px;
  // height: 40px;  // 固定标签栏高度

  .tab-item {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    position: relative;
    // padding-bottom: 8px;  // 减小底部padding

    &.active {
      color: #126983;
      font-weight: 500;

      // &::after {
      //   content: '';
      //   position: absolute;
      //   bottom: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 2px;
      //   background-color: #126983;
      // }
    }
  }
}

.ranking-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px; // 为滚动条预留空间

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #e5e5e5;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .ranking-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    height: 48px; // 固定每项高度

    .rank-index {
      width: 32px;
      text-align: center;
      color: #999;
      font-size: 16px;

      .rank-icon {
        width: 24px;
        height: 24px;
      }
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 12px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-name {
      flex: 1;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-score {
      font-size: 14px;
      color: #333;
      margin-left: 16px;
    }
  }
}

.paihangbang-header {
  display: flex;
  align-items: center;
}

.rightPannel-chat {
  display: flex;
  justify-content: space-around;
  height: 240px;
}

//shershi
.chart-container {
  margin-bottom: 24px;
  width: 188px;
  height: 240px;

  h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }
}
</style>
